﻿@page "/ui-blocks-logos"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Logo Clouds
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4" Style="max-width: 1000px;">
    A great way to build trust by showcasing the well-known brands or companies that use your product or service.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase logo cloud layouts for displaying client/partner brands with centered logo arrangements, logos positioned to the right with descriptive text to the left, and flexible responsive layouts using <code>RadzenStack</code> with wrapping for multiple logo images.
</RadzenText>

<RadzenText Anchor="ui-blocks-logos#centered-logos" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Centered Logos
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Dark">
                <RadzenRow RowGap="3rem" Gap="1rem" class="rz-w-100 rz-mx-auto rz-background-color-base-darker" >
                    <RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-my-6 rz-my-sm-12">
                            <RadzenText Text="Trusted by employees at top companies" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-darker" />
                            <RadzenText Text="Join the brands that rely on us for excellence" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-base-darker" />
                            <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-12 rz-mx-12" Orientation="Radzen.Orientation.Horizontal" Wrap="Radzen.FlexWrap.Wrap" JustifyContent="Radzen.JustifyContent.Center" Gap="3rem">
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                                <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                            </RadzenStack>
                        </RadzenStack>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-logos#logos-to-the-right" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Logos to the right
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Theme's default">
                <RadzenRow RowGap="2rem" Gap="1rem" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Normal" class="rz-w-100 rz-mx-auto rz-p-6 rz-p-sm-12 rz-background-color-" >
                    <RadzenColumn Size="12" SizeLG="6">
                        <RadzenText Text="Trusted by employees at top companies" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" Style="max-width: 800px" class="" />
                        <RadzenText Text="Join the brands that rely on us for excellence" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-m-0 rz-text-secondary-color" />
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeLG="6">
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" Orientation="Radzen.Orientation.Horizontal" Wrap="Radzen.FlexWrap.Wrap" JustifyContent="Radzen.JustifyContent.Normal" Gap="3rem">
                            <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                            <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                            <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                            <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                            <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                            <RadzenImage Path="" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
                        </RadzenStack>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>
